<template>
    <div class="appraise_wrapper">
      <div class="rating_header">
        <div class="rating_header_left">
          <p class="score">{{parseFloat(ratingScoresData.overall_score).toFixed(1)}}</p>
          <p>商家评分</p>
          <p>高于周边商家{{parseFloat(ratingScoresData.compare_rating*100).toFixed(1)}}%</p>
            <van-rate class="rating" v-model="ratingScoresData.overall_score" allow-half void-icon="star" void-color="#eee" />
        </div>
        <div class="rating_header_right">
          <p>
            <span class="title">服务态度</span>
            <van-rate class="rating" v-model="ratingScoresData.service_score" allow-half void-icon="star" void-color="#eee" />
            <span class="rating_num">{{parseFloat(ratingScoresData.service_score).toFixed(1)}}</span>
          </p>
          <p>
            <span class="title">菜品评价</span>
            <van-rate class="rating" v-model="ratingScoresData.food_score" allow-half void-icon="star" void-color="#eee" />
            <span class="rating_num">{{parseFloat(ratingScoresData.food_score).toFixed(1)}}</span>
          </p>
          <p>
            <span class="title">送达时间</span>
            <van-rate class="rating" v-model="ratingScoresData.deliver_time" allow-half void-icon="star" void-color="#eee" />
            <span class="rating_num">{{ratingScoresData.deliver_time}}分钟</span>
          </p>
        </div>
      </div>
      <div class="appraise_con" v-load-more="loaderMoreRating">
        <ul class="tag_list">
          <li v-for="(item, index) of ratingTagsList" :key="index" :class="{unsatisfied: item.unsatisfied, active: ratingTageIndex == index}" @click="changeTgeIndex(index, item.name)">{{item.name}}({{item.count}})</li>
        </ul>
        <ul class="appraise_list">
          <li class="appraise_item" v-for="(item, index) of ratingList" :key="index">
            <div class="user_avatar">
              <img src="@/assets/images/face.png" />
            </div>
            <div class="appraise_list_details">
              <div class="username">
                <h3>{{item.username}}</h3>
                <time class="rated_at">{{item.rated_at}}</time>
              </div>
              <div class="star_desc">
                <van-rate class="rating" v-model="item.rating_star" allow-half void-icon="star" void-color="#eee" />
                <span class="time_spent_desc">超赞</span>
              </div>
              <div class="comment">炒鸡Q弹的牛肉面，牛肉的份量也是超满足，性价比非常高，哈哈，明天中午叫上同事一起点餐</div>
              <div class="comment_reply">
                商家回复：尊敬的主人您好！感谢您的好评和肯定，我们会再接再厉争取服务好每一位顾客，期待您再次光临！祝生活愉快，天天开心...
              </div>
              <ul class="food_img_ul">
                <li v-for="(innerItem, index) in item.item_ratings" :key="index" @click="handleBannerClick(innerItem)">
                  <img :src="getImgPath(innerItem.image_hash)" v-if="innerItem.image_hash">
                </li>
              </ul>
              <ul class="food_name_ul">
                <li><i class="iconfont like">&#xeb99;</i></li>
                <li v-for="(item, index) in item.item_ratings" :key="index" class="ellipsis">
                  <span>{{item.food_name}}</span>
                </li>
              </ul>
            </div>
          </li>
          <van-loading size="20px" color="#1989fa" class="loading" v-show="loadRatings">加载中...</van-loading>
        </ul>
      </div>
      <transition name="showbrief">
        <gallary v-if="showGallary" :ratingPics="ratingPics" @close="handleGallaryClose"></gallary>
      </transition>
    </div>
</template>

<script>
import Gallary from '@/components/gallary/Gallary'
import { Loading, Rate } from 'vant'
import { loadMore, getImgPath } from '@/assets/js/mixin'
export default {
  name: 'Appraise',
  components: {
    Gallary,
    [Loading.name]: Loading,
    [Rate.name]: Rate
  },
  props: ['shopId'],
  data () {
    return {
      showGallary: false,
      ratingList: [], // 评价列表
      ratingScoresData: [], // 评价总体分数
      ratingTagsList: [], // 评价分类列表
      ratingOffset: 0, // 评价获取数据offset值
      ratingTageIndex: 0, // 评价分类索引
      preventRepeatRequest: false, // 防止多次触发数据请求
      ratingTagName: '', // 评论的类型
      loadRatings: false, // 加载更多评论是显示加载组件
      ratingPics: []
    }
  },
  mixins: [loadMore, getImgPath],
  mounted () {
    this.initData()
    window.addEventListener('scroll', this.scrollBottom)
  },
  methods: {
    initData () {
      // 评论列表
      this.$api.home.getRatingList(this.shopId, this.ratingOffset).then(res => {
        this.ratingList = res.data
      })
      // 商铺评论详情
      this.$api.home.ratingScores(this.shopId).then(res => {
        this.ratingScoresData = res.data
      })
      // 评论Tag列表
      this.$api.home.ratingTags(this.shopId).then(res => {
        this.ratingTagsList = res.data
      })
    },
    handleBannerClick (ratingPics) {
      this.showGallary = true
      this.ratingPics = ratingPics
    },
    handleGallaryClose () {
      this.showGallary = false
    },
    // 获取不同类型的评论列表
    changeTgeIndex (index, name) {
      this.ratingTageIndex = index
      this.ratingOffset = 0
      this.ratingTagName = name
      this.ratingList = []
      this.loadRatings = true
      this.$api.home.getRatingList(this.shopId, this.ratingOffset, name).then(res => {
        this.loadRatings = false
        this.ratingList = res.data
      })
    },
    scrollBottom () {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件(距底部20px时触发加载)
      if (scrollTop + windowHeight >= scrollHeight && !this.isAchiveBottom) {
        this.loaderMoreRating()
      }
    },
    // 加载更多评论
    loaderMoreRating () {
      if (this.preventRepeatRequest) {
        return
      }
      this.loadRatings = true
      this.preventRepeatRequest = true
      this.ratingOffset += 10
      this.$api.home.getRatingList(this.shopId, this.ratingOffset, this.ratingTagName).then(res => {
        this.loadRatings = false
        this.ratingList = [...this.ratingList, ...res.data]
        if (res.data.length >= 10) {
          this.preventRepeatRequest = false
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .appraise_wrapper
    overflow-y: auto
    background-color: #f5f5f5
    .rating_header
      display: flex
      margin-bottom: .16rem
      padding: .4rem 0 .6rem .4rem
      background-color: #fff
      .rating_header_left
        width: 2.5rem
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        .score
          font-size: .75rem
          color: #ff6000
          font-weight: 400
        .rating
          margin-top: .1rem
          zoom: .7
      .rating_header_right
        flex: 1
        display: flex
        flex-direction: column
        justify-content: space-between
        padding-left: .5rem
        .title
          font-size: .28rem
        .rating
          margin: 0 .1rem
          zoom: .5
        .rating_num
          color: #ff6000
    .appraise_con
      padding: .2rem .24rem 0
      background-color: #fff
      .tag_list
       padding-bottom: .2rem
       border-bottom: 1px solid #eee
       li
        display: inline-block
        padding: 0 .18rem
        height: .56rem
        line-height: .56rem
        margin: .07rem
        font-size: .24rem
        border-radius: .05rem
        color: #6d7885
        background-color: #ebf5ff
        &.active
          color: #fff
          background-color: #0097ff
        &.unsatisfied
          color: #aaa
          background-color: #f5f5f5
        &.unsatisfied.active
          color: #fff
          background-color: #ccc
      .appraise_list>li
        padding: .3rem 0 .3rem .8rem
        position: relative
        border-bottom: .01rem solid #f5f5f5
        .user_avatar
          width: .6rem
          height: .6rem
          border-radius: 50%
          overflow: hidden
          position: absolute
          top: .3rem
          left: 0
        .username
          display: flex
          align-items: center
          justify-content: space-between
          h3
            font-size: .26rem
          time
            color: #999
        .star_desc
          padding: .15rem 0 0
          .rating
            margin: 0 .1rem 0 0
            zoom: .5
          .time_spent_desc
            color: rgb(255, 96, 0)
        .comment
          font-size: .28rem
          padding: .10rem 0
        .comment_reply
          position: relative
          margin: .2rem 0
          padding: .2rem
          background: #f3f3f3
          border-radius: .05rem
          &:after
            content: " "
            position: absolute
            bottom: 100%
            left: .4rem
            width: 0
            height: 0
            border-style: solid
            border-width: 0 .15rem .15rem
            border-color: transparent transparent #f3f3f3
        .food_img_ul
          padding: .08rem 0 .24rem
        .food_img_ul li
          display: inline-block
          img
            width: 2rem
            height: 2rem
        .food_name_ul
          display: flex
          align-items: center
          flex-wrap: wrap
          margin-bottom: -.1rem
          li
            .like
              color: #999
              font-size: .3rem
              margin-right: .15rem
            span
              display: inline-flex
              align-items: center
              height: .48rem
              margin-right: .08rem
              margin-bottom: .08rem
              font-size: .24rem
              color: #6d7885
              padding: 0 .12rem
              border-radius: .05rem
              white-space: nowrap
              background-color: #ebf5ff
              ellipsis()
    .loading
      padding: .3rem 0
      text-align: center
  .showcover-enter-active,
  .showcover-leave-active
    transition: opacity 0.3s
  .showcover-enter,
  .showcover-leave-active
    opacity: 0
  .showbrief-enter-active,
  .showbrief-leave-active
    transition: 0.2s
  .showbrief-enter,
  .showbrief-leave-active
    transform: scale(.3)
    opacity: 0
</style>
